const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PostcssPresetEnv = require('postcss-preset-env');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = { //postcss-loader postcss-preset-env
    entry: './index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i, 
                use: [
                    /*
                        package.json 都进行设置
                        "browserslist": [
                            "last 1 version",
                            "> 1%"
                        ]
                    */
                    //第一种方式 //下载npm install -D css-loader style-loader   postcss-loader postcss-preset-env -D
                    // MiniCssExtractPlugin.loader,//作用 提取js中的css形成单独文件
                    // 'css-loader',
                    // {
                    //     loader: 'postcss-loader',
                    //     options: { postcssOptions: { plugins: [PostcssPresetEnv()] } }
                    // }
                    //第二种方式 新建文件postcss.config.js 下载 postcss-loader autoprefixer -D 或者autoprefixer代替postcss-preset-env均可
                    // module.exports = {
                    //     'plugins': [
                    //         require('autoprefixer')
                    //     ]
                    // }
                   MiniCssExtractPlugin.loader,//作用 提取js中的css形成单独文件
                    'css-loader',
                    'postcss-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: 'css/index.css' ,chunkFilename: "[id].css"}),//默认生成main.js  filename自定义
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ],
    mode: 'development'
}
